<template>
     <div class="container">
          <!-- 团课课程  按钮部分 -->
          <div class="handle-box">
               <el-button-group class="ml-4">
                    <el-button type="primary" @click="addCourse">添加课程</el-button>
               </el-button-group>
          </div>
          <el-divider></el-divider>
          <!-- 课程列表 -->
          <el-table :data="tableData" border style="width: 100%"    >
               <el-table-column prop="name" sortable label="课程名称"  />
               <el-table-column prop="duration" sortable label="时长(分钟)"  />
               <el-table-column prop="contains" sortable label="上课容纳人数" />
               <el-table-column label="操作" width="250">
                    <template #default="scope">
                         <el-row class="btn-opt">
                              <el-button link type="primary" :icon="Edit" size="small" @click="editCourse(scope.row)">编辑</el-button>
                              <el-button  link type="danger" :icon="CloseBold" size="small" @click="deleteCourse(scope.row)">删除</el-button>
                         </el-row>
                    </template>
               </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-row style="margin-top: 30px;">
               <el-col :span="20">
                    <el-pagination v-model:current-page="pageData.pageCurrent" :page-size="pageData.pageSize"
                         layout="prev, pager, next" :total="pageData.pageTotal" background
                         @current-change="handleCurrentChange" />
               </el-col>
          </el-row>

          <!--添加修改的组件  -->
          <!-- 添加或者修改课程 -->
          <el-drawer v-model="addEditDrawer" direction="rtl" size="50%" :before-close="handleClose">
               <template #header>
                    <h2>{{ drawerTitle }}</h2>
               </template>
              <AddEditCourse v-model:courseFormData="courseFormData" :drawerTitle="drawerTitle" v-model:addEditDrawer="addEditDrawer"/>

          </el-drawer>
     </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getCourseList } from '@/api/course'
import {Edit,CloseBold} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import AddEditCourse from './courseListSub/AddEditCourse.vue'
const pageData = reactive({
     pageCurrent: 1,
     pageSize: 3,
     pageTotal: 0
})
const handleCurrentChange = (val) => {
     console.log(`current page: ${val}`)
     pageData.pageCurrent = val
     getData()

}
const tableData = ref([])

//获取会员开信息
const getData = () => {
     getCourseList({ pageNum: pageData.pageCurrent, pageSize: pageData.pageSize }).then(res => {
          console.log(res, 'card----')
          //todo 如下实现的分页是假分页  需要后端返回真分页的数据  总数据量 
          let start = (pageData.pageCurrent - 1) * pageData.pageSize;//开始位置
          let end = pageData.pageCurrent * pageData.pageSize;//结束位置 数组的截取的时候 [start,end) suo所以不用-1 
          tableData.value = res.data.slice(start, end)
          pageData.pageTotal = res.data.length
     })
}
//调用方法
getData()
//添加或者修改的抽屉
const addEditDrawer = ref(false)
const drawerTitle = ref('')
//传给表单的信息  
const courseFormData = reactive({
     id: null,
    name:'', 
    duration:null,  
    contains:null, 
    timesCost:null,   
    color:'',   
    memberCardData:[],   
    introduce:'',   
    limitSex:'无限制',     
    limitAge:0,  
    limitCounts:0,
})
//点击添加会员卡的按钮触发的事件
const addCourse = () => {
     console.log('-----------新增课程--------------')
     addEditDrawer.value = true
     drawerTitle.value = '新增课程'
     //清空数据 
     courseFormData.id= null
    courseFormData.name='' 
    courseFormData.duration=null  
    courseFormData.contains= null   
    courseFormData.timesCost= null     
    courseFormData.color=''   
    courseFormData.memberCardData=[]   
    courseFormData.introduce=''   
//     courseFormData.limitSex=''     
//     courseFormData.limitAge='' 
//     courseFormData.limitCounts=''
}

//点击编辑按钮触发的事件
const editCourse= (row) => {
     console.log('-----------编辑课程--------------')
     
     addEditDrawer.value = true
     drawerTitle.value = '编辑课程'
     //todo 根据课程id  调用后端查询当前课程的的信息  用户数据点的回显
     Object.assign(courseFormData,row)
     // console.log(courseFormData)
     //  courseFormData.id =row.id
     // courseFormData.name = row.name
     // courseFormData.duration = row.duration
     // courseFormData.contains = row.contains
     // courseFormData.timesCost = row.timeCost
     // courseFormData.color =row.color
     // courseFormData.memberCardData = row.memberCardData
     // courseFormData.introduce = row.introduce
     // courseFormData.limitSex = row.limitSex
     // courseFormData.limitAge = row.limitAge
     // courseFormData.limitCounts = row.limitCounts

}
//点击删除按钮触发的事件
const deleteCourse = (row) => {
     console.log('-----------删除课程--------------')
     ElMessageBox.confirm(
          '你确定要删除此课程吗?',
          '提示',
          {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning',
          }
     )
          .then(() => {
               //todo调用后端接口 删除数据
               console.log('要删除数据的id:', row.id)
               ElMessage({
                    type: 'success',
                    message: '删除成功',
               })
          })
          .catch(() => {
               ElMessage({
                    type: 'info',
                    message: '取消删除',
               })
          })
}




const handleClose = (done) => {
     ElMessageBox.confirm('你确定关闭吗?')
          .then(() => {
               done()
          })
          .catch(() => {
               // catch error
          })
}

</script >
<style lang="less" scoped>
.handle-box {
     margin-bottom: 20px;
}


.btn-opt {
     font-size: 13px;

     .el-button {
          margin-left: 3px;
          font-size: 13px;
          padding: 1px 6px;
     }
}
</style>